<template>
	<view>
		<view class="menu" >
			<view class="menu_own" v-if="Object.keys(group).length>0"  @click="handerTarget">
				<image class="ownpic"  src="/static/businessIcon/sev.png" mode="heightFix"></image>
				<view class="owntext"><text>管家服务</text></view>
			</view>
			<view v-else class="menu_own" :class="{blink: Object.keys(group).length===0}" @click="regOwn">
				<image class="ownpic"  src="/static/businessIcon/sev.png" mode="heightFix"></image>
				<view class="owntext" style="background-color: green;"><text>管家申请</text></view>
			</view>
			
			
			<view class="menu_item" @click="toGroup">
				<image src="/static/member.png" mode="heightFix"></image>
				<text>附近群组</text>
			</view>
			<view class="menu_item" @click="toMyArea">
				<image src="/static/nofly.png" mode="heightFix"></image>
				<text>周边信息</text>
			</view>
			<view class="menu_item" @click="addressbook">
				<image src="/static/adressBook.png" mode="heightFix"></image>
				<text>通讯录</text>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'tapBar',
	props: {
	    group: {
	        type: Object,
	        default: () =>{}
	    }
	},
	data() {
		
		
		return {
			isInputShow: false,
			messages: [],
			msglist: []
		};
		
	},
	methods: {
		toMyArea() {
		this.$emit('toMyArea')
		uni.$emit("toolBarEven",true)
		},
		handerTarget(){
			uni.$emit("toolBarEven",true)
			const item={
				targetType:"3",
				targetId:this.group._id,
				targetName:this.group.own.name,
				nicPic:this.group.own.photo,
				userTel:this.group.own.telphone,
				address:this.group.address
			}
			this.$emit('handerTarget',item)
				
		},
			toGroup() {
				uni.$emit("toolBarEven",true)
				 const group = {
		         targetId: this.group.groupId,
		         targetName: this.group.groupName,
		         targetType: '2',
			
		     };
		
		     this.$emit('handerTarget', group);
		},
		addressbook(){
			uni.navigateTo({
				url:'/pages/contacts/contacts',
				animationType:'slide-in-left'
			})
		},
		
		regOwn(){
			uni.navigateTo({
				url:"/pages/regOwn/regOwn",
				animationType:'slide-in-left'
			})
		}
		
	}
};
</script>
<style lang="scss" scoped>
/* 新增关键帧动画 */
@keyframes slideIn {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(10%);
		opacity: 1;
	}
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
/* 修改后的菜单样式 */
.menu {
	display: flex;
	flex-direction: column;
	width: 125rpx;
    background-color: white;
	justify-content: flex-start;
	position: fixed;
	font-size: 25rpx;
	left: 0;
	bottom: 120rpx; /* 从左下角开始 */
	align-items: center;
	z-index: 1;
	height: auto; /* 高度根据内容自适应 */

	/* 新增动画效果 */
	animation: slideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	transform-origin: left bottom; /* 动画从左下角开始 */

	/* 添加悬停弹性效果 */
	transition: transform 0.3s ease;
	&:hover {
		transform: translateX(5px) scaleY(1.05);
	}

	.menu_item {
		display: flex;
		width: 120rpx;
		height: 120rpx;
		color: white;
		font-weight: 500;
		margin-bottom: 20rpx;
		background-color: #aa5500;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		border-radius: 25rpx;
		transition: background-color 0.3s ease;

		/* 新增元素级动画 */
		&:nth-child(1) {
			animation-delay: 0.1s;
		}
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		&:nth-child(3) {
			animation-delay: 0.3s;
		}
		&:nth-child(4) {
			animation-delay: 0.4s;
		}

		/* 图标动画 */
		image {
			width: 60rpx;
			height: 60rpx;

			transition: all 0.3s ease;
			&:active {
				transform: scale(1.2) rotate(15deg);
			}
		}
	}
}
.menu_own {
	display: flex;
	
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	&.blink {
		    animation: blink 1.2s ease-in-out infinite;
		}
	.ownpic {
		width: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;
		border-width: #55aaff;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		
	}
	.owntext {
		display: flex;
		width: 100rpx;
		text-align: center;
		justify-content: center;
		height: 30rpx;
		border-radius: 15rpx;
		background-color: green;
		color: white;
		font-size: 22rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}
}

/* 移动端适配 */
// @media (max-width: 768px) {
//     .menu {
//         animation-duration: 0.4s;
//         width: 50rpx;
//         .menu_item image {
//             width: 35rpx;
//             height: 35rpx;
//         }
//     }
// }
</style>
